<template>
  <div class="contentBox">
    <div class="contentTop">
      <span>{{props.title}}：</span>
      <el-button @click="eliminate">去除多余</el-button>
    </div>
    <vue3-tinymce v-model="content" :setting="tinymce"></vue3-tinymce>
  </div>
</template>

<script setup>
  /*
  * 组件参数接收
  * title String 标题
  * placeholder String 富文本为空时显示的提示语
  * content String 需要一开始就展现在富文本中的内容
  * @getContent function 获取富文本中的内容，接收一个参数*/
  import Vue3Tinymce from "@jsdawn/vue3-tinymce"
  import {ref,reactive,defineProps,defineEmits,watchEffect} from "vue"

  //接收父组件传递的参数
  const props = defineProps(['title',"placeholder","content"])

  //接收父组件传递的方法
  const emit = defineEmits(['getContent'])

  //富文本内容
  const content = ref("")

  //富文本编辑器配置
  const tinymce = reactive({
    height: 400,
    placeholder: props.placeholder || "请输入内容！",
    toolbar: false, //隐藏工具栏
    menubar: "none", //隐藏目录
    branding: false, //隐藏右下角logo
    content_style: "p{margin: 0;padding: 0 0 15px;} body{margin: 0;padding: 0 15px;} body::before{left: 15px !important;}", //设置内容样式
  })

  //去除富文本中多余内容
  function eliminate(){
    if(content.value === ""){
      return
    }
    const reg = /<p(?:(?!<\/p>).|\n)*?<\/p>/gm
    content.value = reg[Symbol.match](content.value).join("")
  }

  //实时返回富文本内容
  watchEffect(()=>{
    emit("getContent",content.value)
  })

  //获取父组件传递的富文本中的值
  watchEffect(()=>{
    content.value = props.content || ""
  })
</script>

<style scoped>
  .contentTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
  }
</style>